<style>
.exam-container {

    background: #f0f0f0;
    height: 100%;
}

.exam-title {
    background: #fff;
    padding: 15px;
}

.exam-title-text {
    font-size: 18px
}

.exam-title-text .banben {
    color: #ccc;
    font-size: 12px;
    margin-left: 5px;
}

.exam-content {
    padding: 0 10px;
}

.exam-sum {
    font-size: 14px;
    height: 26px;
    line-height: 26px;
    color: #999999;
    padding-left: 20px;
}

.exam-container .exam-card {
    padding: 0 10px;
    border-radius: 10px;
}

.exam-container .exam-top {
    background: #fff;

    color: #333333;
    font-size: 14px;
    padding: 10px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.exam-container .exam-img {
    width: 100%;
    display: block;
}

.exam-container .exam-img img {
    display: block;
    width: 100%;
}

.exam-container .exam-bottom {
    display: block;
    background: #fff;
    padding: 0 10px 20px 20px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    font-size: 16px;
}

.exam-container .exam-next {
    position: fixed;
    left: 0;
    bottom: 0;
    height: 50px;
    line-height: 50px;
    text-align: center;
    color: #fff;
    font-size: 15px;
    width: 100%;
    background: url('../images/button_exam.png') no-repeat;
    background-size: 100% 100%;
}

.exam-container .ivu-checkbox-group-item {
    width: 100%;
    height: 40px;
    line-height: 40px;
    font-size: 16px!important;
}

.exam-container .ivu-checkbox-input {
    font-size: 20px;
    height: 20px!important;
}

.ivu-checkbox-inner {
    height: 20px!important;
    width: 20px!important;
    margin-right: 10px;
    border-radius: 10px!important;
}

.ivu-checkbox-checked .ivu-checkbox-inner {
    border-color: #fff!important;
    background-color: #fff!important;

    background: url('../images/Ok.png') no-repeat;
    background-size: 100% 100%;
}

.ivu-checkbox-checked .ivu-checkbox-inner:after {
    display: none!important;
}

.selectflag {
    padding: 2px 5px;
    border-radius: 5px;
    color: #2d8cf0;
    border: 1px solid #2d8cf0;
}

.demo-spin-icon-load {
    animation: ani-demo-spin 1s linear infinite;
}

@keyframes ani-demo-spin {
    from {
        transform: rotate(0deg);
    }
    50% {
        transform: rotate(180deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.demo-spin-col {
    height: 100px;
    position: relative;
    border: 1px solid #eee;
}
</style>
<template>
    <div class="exam-container">
        <Spin fix v-if="spinShow">
            <Icon type="load-c" size=18 class="demo-spin-icon-load"></Icon>
            <p>{{msg1}}</p>
            <p>{{msg2}}</p>
        </Spin>
        <div class="exam-title">
            <div class="exam-title-text">在线考试<span class="banben">v1.4.2.0</span></div>
            <Progress :percent="percent" status="active"></Progress>
        </div>
        <div class="exam-content">
            <div class="exam-sum"></div>
            <div class="exam-card">
                <div class="exam-top">
                    <span class="selectflag" v-if="exam.QUESTION_TYPE==2">多选</span>
                    <span class="selectflag" v-else>单选</span>
                    <span class="selecttitle">{{examflag}}.{{exam.QUESTION_NAME}}</span>
                </div>
                <div class="exam-img"><img src="../images/examcardbg.png" alt=""></div>
                <div class="exam-bottom">
                    <Checkbox-group v-model="answer" @on-change="checkGroupChange">
                        <template v-for="(item, index) in exam.examOptList">
                            <Checkbox v-bind:label='item.OPTION_CODE'>
                                {{item.OPTION_CODE}}、{{item.OPTION_CONTENT}}
                            </Checkbox>
                        </template>
                    </Checkbox-group>
                </div>
            </div>
        </div>
        <div class="exam-next" @click="examNext">下一题</div>
    </div>
</template>
<script>
var qs = require('qs');
export default {
    data() {
        return {
            msg1: '正在进入考试...',
            msg2: '',
            spinShow: true,
            examflag: 1,
            examlength: 0,
            percent: 0,
            answer: [],
            answer1: [],
            answerArr: [],
            exam: {},
            examdata: [],
            userData: {}

        }
    },
    mounted() {
        var that = this
        /*这段代码是固定的，必须要放到js中 ios安卓交互*/
        var userDataparams=that.$route.params.userData
        console.log(typeof userDataparams)
        if (that.$route.query.userId && that.$route.query.Token && that.$route.query.serviceNo) {
            that.$data.userData.userId = that.$route.query.userId;
            that.$data.userData.Token = that.$route.query.Token;
            that.$data.userData.serviceNo = that.$route.query.serviceNo;
            that.examdatafn()
        } else {
            if (userDataparams) {
                that.$data.userData =userDataparams 
                that.examdatafn()
            } else {
                that.setupWebViewJavascriptBridge(function(bridge) {
                    bridge.registerHandler('userData', function(data, responseCallback) {
                        // that.$Message.success('与安卓ios测试data');
                        // that.$Message.success(JSON.stringify(data));
                        that.$data.userData = data
                        
                        that.examdatafn()
                        responseCallback({ 'statusCode': '0', 'msg': '我收到你发的消息了', 'data': data })
                    })

                })

            }

        }






    },
    methods: {
        setupWebViewJavascriptBridge(callback) {
            if (window.WebViewJavascriptBridge) { return callback(WebViewJavascriptBridge); }
            if (window.WVJBCallbacks) { return window.WVJBCallbacks.push(callback); }
            window.WVJBCallbacks = [callback];
            var WVJBIframe = document.createElement('iframe');
            WVJBIframe.style.display = 'none';
            WVJBIframe.src = 'wvjbscheme://__BRIDGE_LOADED__';
            document.documentElement.appendChild(WVJBIframe);
            setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)
        },
        examdatafn() {
            var that = this
            //请求考试题目数据
            this.$http.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
            var urlstr = '/website/app/invoker/HorsemanService/horsemanExamineSubject'

            var data = qs.stringify(that.$data.userData)
            var header = {
                headers: {
                    "cache-control": "no-cache",
                    "content-type": "application/x-www-form-urlencoded"
                }
            }
            this.$http.post(urlstr, data, header).then(function(res) {
                    console.log(res.data)
                    that.$data.spinShow = false
                    if (!res.data.responseCode) {
                        that.$data.examdata = res.data.responseContent
                        that.$data.examlength = res.data.responseContent.length
                        that.$data.exam = that.$data.examdata[0]

                    } else {
                       
                        that.$data.msg1 = '网络出现异常，请检查网络设置(code:401)'
                        that.$data.msg2 = '点击返回，重新进入考试...'
                        that.$data.spinShow = true
                    }
                })
                .catch(function(err) {
                    
                    that.$data.msg1 = '网络出现异常，请检查网络设置(code:402)'
                    that.$data.msg2 = '点击返回，重新进入考试...'
                    that.$data.spinShow = true

                })
        },
        examNext() {
            var that = this
            if (that.$data.answer.length == 0) {
                this.$Message.error('请选择选择答案！');
            } else {
                if (that.$data.exam.QUESTION_TYPE == '2' && that.$data.answer.length < 2) {
                    this.$Message.error('请选择多个选项！');
                } else {

                    var answer = that.$data.answer.sort().join('')

                    if (that.$data.examflag >= that.$data.examlength) {
                        if (answer != that.$data.exam.RIGHT_ANSWERS && that.$data.examflag == 5) {
                            that.$data.answerArr.push({
                                QUESTION_LIST: that.$data.exam,
                                ERROR_ANSWERS: that.$data.answer
                            })
                        }
                        if (that.$data.answerArr.length == 0) {
                            that.examresult(1)
                        } else {
                            that.examresult(0, that.$data.answerArr)
                        }
                    } else {
                        if (answer != that.$data.exam.RIGHT_ANSWERS) {
                            that.$data.answerArr.push({
                                QUESTION_LIST: that.$data.exam,
                                ERROR_ANSWERS: that.$data.answer
                            })
                        }
                        that.$data.answer = []
                        that.$data.percent = that.$data.percent + 100 / that.$data.examlength
                        this.$data.exam = this.examdata[that.$data.examflag++]
                    }
                    console.log(that.$data.answerArr)
                }
            }

        },
        examresult(deliverymanConsequence, deliverymanConsequenceRes) {
            var that = this
            var urlresult = '/website/app/invoker/HorsemanService/horsemanExamineAnswer'
            var dataObj = Object.assign(that.$data.userData, {
                deliverymanConsequence: deliverymanConsequence,
                deliverymanConsequenceRes: deliverymanConsequenceRes
            })

            var data = qs.stringify(dataObj)
            var header = {
                headers: {
                    "cache-control": "no-cache",
                    "content-type": "application/x-www-form-urlencoded"
                }
            }
            this.$http.post(urlresult, data, header).then(function(res) {

                    if (res.data.responseContent.status == 5 && res.data.responseCode == 0) {
                        that.$router.replace({ name: 'examSuc' });
                    } else if (res.data.responseContent.status == 6 && res.data.responseCode == 0) {
                        that.$router.replace({ name: 'examFail', params: { ERROR_ANSWERS: that.$data.answerArr, examlength: that.$data.examlength,userData:that.$data.userData } });
                    } else {
                        that.$Message.error('网络出现异常，请检查网络设置(code:403)');
                    }
                })
                .catch(function(err) {
                    that.$Message.error('网络出现异常，请检查网络设置(code:404)');
                })
        },
        checkGroupChange(data) {
            //实现单选功能
            var that = this
            if (that.$data.exam.QUESTION_TYPE == '1') {
                let a = new Set(that.$data.answer);
                let b = new Set(that.$data.answer1);
                let differenceABSet = new Set([...a].filter(x => !b.has(x)));
                let arr = Array.from(differenceABSet);
                that.$data.answer1 = that.$data.answer
                if (data.length == 2) {
                    that.$data.answer = arr
                }
            }

        }

    }
}
</script>